<template>
    <div class="projectdetails" v-if="detailsshow">

      <!-- 项目详情 -->
      <div class="projectdetails-content" v-if="detailsmlshow">
        <div class="projectdetails-title">
          <div class="projectdetails-title-imgortitle">
            <img src="../../common/image/icon_detai.png" alt="">
            <h3>{{projectxq.projectName}}</h3>
          </div>
          <div class="projectdetails-title-img" @click="chossdetails">
            <img src="../../common/image/icon_choss.png" alt="">
          </div>
        </div>

        <div class="projectdetails-contents">
          <div class="projectdetails-contents-list">
            <div class="projectdetails-contents-start">
              <img src="../../common/image/icon_jz.png" alt="">
              <div>进行中</div>
            </div>
          </div>
          <div class="projectdetails-contents-list">
            <div class="projectdetails-contents-start">
              <img src="../../common/image/icon_sh.png" alt="">
              <div>审核中</div>
            </div>
          </div>
          <div class="projectdetails-contents-list">
            <div class="projectdetails-contents-start">
              <img src="../../common/image/icon_wc.png" alt="">
              <div>已完成</div>
            </div>
          </div>
          <div class="projectdetails-contents-list">
            <div class="projectdetails-contents-start">
              <img src="../../common/image/icon_yq.png" alt="">
              <div>已逾期</div>
            </div>
          </div>
        </div>
       <div></div>
        <div class="projectdetails-contents-mcorfzr">
          <h1>登山节海报的设计</h1>
          <p>创建人：设计主管-xxx备份</p>
        </div>

        <div class="projectdetails-time">
          <ul>
            <li>
              <div class="projectdetails-starttime">2022-06-01<span>（开始）</span></div>
            </li>
            <li>
              <div class="projectdetails-endtime">2022-06-24<span>（截止）</span></div></li>
          </ul>
        </div>

        <div class="projectdetails-obj">
          <div class="projectdetails-context-left">指派对象：</div>
          <div class="projectdetails-obj-tx">
            <img src="../../common/image/shanfenyuan.png" alt="">
            <img src="../../common/image/shanfenyuan.png" alt="">
            <img src="../../common/image/shanfenyuan.png" alt="">
          </div>
          <div class="projectdetails-obj-nun">26+</div>
        </div>

        <div class="projectdetails-sm">
          <div class="projectdetails-context-left">项目说明：</div>
          <div class="projectdetails-sm-context">请为即将到来的登山节设计一个海报，风格不限，尺寸为1920x1080 px第三方第三的防守打法大师傅阿斯蒂芬发送水电费第三方阿斯蒂芬</div>
        </div>
        <div class="projectdetails-fj">
          <div class="projectdetails-context-left">相关附件：</div>
          <div class="projectdetails-fj-context">
            <img src="../../common/image/shanfenyuan.png" alt="">
            <span>往届登山节图片.rar</span>
          </div>
        </div>

        <div class="projectdetails-bt">
          <div class="projectdetails-bt-th" @click="projecttjrw">提交任务</div>
        </div>

      </div>

      <!-- 领取成功 -->
      <!-- <div class="project-lq" v-if="detailslcshow">
        <div class="project-lq-k">
          <div>
            <img src="../../common/image/icon_lqcg.png" alt="">
            <p>您已成功领取任务！</p>
            <p>可在<span>项目列表</span>中查看项目详情</p>
          </div>
        </div>
        <div class="project-lq-choss" @click="projectchoss"><img src="../../common/image/icon_choss.png" alt=""></div>
      </div> -->


       <!-- 提交项目 -->
      <div class="project-tj-rw" v-if="detailstjshow">
        <div>
          <p>提交任务</p>
          <div class="project-tj-rw-xgsm">
            <h3>请输入相关说明</h3>
            <input type="text">
          </div>
          <div class="project-tj-rw-upload">
            <h3>添加附件</h3>
            <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                 您可以点击这里上传文件，<br><em>或把文件拖放到这里。</em>
             </div>
            <template #tip>
             <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
               </div>
               </template>
             </el-upload>
          </div>
          <div class="project-lq-rw-cz">
            <div class="project-lq-rw-qx" @click="projectrwqx">取消</div>
            <div class="project-lq-rw-qr" @click="projectrwqr">确认</div>
          </div>
       </div>
      </div>


       <!-- 申请成功 -->
      <div class="project-lq" v-if="detailstjcgshow">
        <div class="project-lq-k">
          <div>
            <img src="../../common/image/icon_lqcg.png" alt="">
            <p>您已成功提交任务！</p>
            <p>可在<span>待审核项目</span>列表中查看或修改</p>
            <div class="project-sqcg" @click="projectrwsqwc">好的</div>
          </div>
        </div>
      </div>


       <!-- 项目详情 编辑-->
      <div class="projectdetails-content" v-if="detailsshbjshow">
        <div class="projectdetails-title">
          <div class="projectdetails-title-imgortitle">
            <img src="../../common/image/icon_detai.png" alt="">
            <h3>项目详情</h3>
          </div>
          <div class="projectdetails-title-img" @click="chossdetails">
            <img src="../../common/image/icon_choss.png" alt="">
          </div>
        </div>
<!-- v-if="projectxq.projectStatus==1" -->
        <div class="projectdetails-contents">
          <div class="projectdetails-contents-list" v-if="detailxq.projectStatus==1">
            <div class="projectdetails-contents-start">
              <img src="../../common/image/icon_jz.png" alt="">
              <div>进行中</div>
            </div>
          </div>
          <!-- <div class="projectdetails-contents-list">
            <div class="projectdetails-contents-start">
              <img src="../../common/image/icon_sh.png" alt="">
              <div>审核中</div>
            </div>
          </div> -->
          <div class="projectdetails-contents-list" v-if="detailxq.projectStatus==2" >
            <div class="projectdetails-contents-start">
              <img src="../../common/image/icon_wc.png" alt="">
              <div>已完成</div>
            </div>
          </div>
          <div class="projectdetails-contents-list" v-if="detailxq.projectStatus==3" >
            <div class="projectdetails-contents-start">
              <img src="../../common/image/icon_yq.png" alt="">
              <div>已逾期</div>
            </div>
          </div>
        </div>

        <div class="projectdetails-contents-gd">

          <div class="neihuq">
                  <div class="projectdetails-contents-mcorfzr">
                    <h1>{{detailxq.projectName}}</h1>
                    <p>创建人：{{detailxq.createUser}}</p>
                  </div>

                  <div class="projectdetails-time">
                    <ul>
                      <li>
                        <div class="projectdetails-starttime">{{detailxq.projectBeginDate}}<span>（开始）</span></div>
                      </li>
                      <li>
                        <div class="projectdetails-endtime">{{detailxq.projectEndDate}}<span>（截止）</span></div></li>
                    </ul>
                  </div>

                  

                  <div class="projectdetails-sm">
                    <div class="projectdetails-context-left">项目说明：</div>
                    <div class="projectdetails-sm-context">{{detailxq.projectDescribe}}</div>
                  </div>

                  <div class="projectdetails-fj projectmarginleft">
                            <div class="projectdetails-context-left">相关附件：</div>
                            <div class="projectdetails-fj-context fj-style" v-if="projectFileslist">
                              <div class="projectdetails-fj-context-file" v-for="(item,index)  in projectFileslist" :key="index">
                              <img src="../../common/image/icon_pdf.png" alt="" v-if="item.filelx=='pdf'">
                              <img src="../../common/image/icon_word.png" alt="" v-if="item.filelx=='word'">
                              <img src="../../common/image/icon_xls.png" alt="" v-if="item.filelx=='xls'">
                              <img src="../../common/image/icon_txt.png" alt="" v-if="item.filelx=='txt'">
                              <img src="../../common/image/icon_picture.png" alt="" v-if="item.filelx=='img'">
                              <img src="../../common/image/icon_package.png" alt="" v-if="item.filelx=='zip'">
                              <img src="../../common/image/icon_video.png" alt="" v-if="item.filelx=='avi'">
                              <span>{{item.filesname}}</span>
                              </div>
                            </div>
                            <div v-if="projectFileslist==''" class="no-dataiksfj">无上传附件</div>
                          </div>

                  <!-- <div class="projectdetails-fj" @click="download(detailxq.projectFilesNames,detailxq.projectFiles)">
                    <div class="projectdetails-context-left">相关附件：</div>
                    <div class="projectdetails-fj-context">
                      <img src="../../common/image/shanfenyuan.png" alt="">
                      <span>{{detailxq.projectFilesNames}}</span>
                    </div>
                  </div> -->
                  <div class="projectdetails-fj projectdetails-xmjd projectmarginleft">
                            <div class="projectdetails-context-left">项目节点：</div>
                            <div class="projectdetails-fj-jd">
                              <div class="projectdetails-jd-list" v-for="(workAssignListitem,index) in detailxq.workAssignList" :key="index">
                                <div class="projectdetails-jd-list-img"><img :src="workAssignListitem.wxHeadImage" alt=""></div>
                                <div class="projectdetails-jd-list-xq">
                                  <h2>{{workAssignListitem.projectDescribe}}</h2>
                                  <p>截止时间{{workAssignListitem.projectEndDate}}</p>
                                </div>
                                <div class="projectdetails-jd-list-zt">
                                  <img src="../../common/image/icon_timebjj.png" alt="" v-if="surplusDay>7">
                                  <img src="../../common/image/icon_timejj.png" alt="" v-if="surplusDay<=7&&surplusDay>=0">
                                  </div>
                                <div class="projectdetails-jd-list-right">
                                  <div class="projectdetails-jd-list-right-text" v-if="workAssignListitem.projectStatus==0">待审核</div>
                                  <div class="projectdetails-jd-list-right-text" v-if="workAssignListitem.projectStatus==1">待领取</div>
                                  <div class="projectdetails-jd-list-right-text" v-if="workAssignListitem.projectStatus==2">进行中</div>
                                  <div class="projectdetails-jd-list-right-text" v-if="workAssignListitem.projectStatus==3">已完成</div>
                                  <div class="projectdetails-jd-list-right-text" v-if="workAssignListitem.projectStatus==4">已逾期</div>
                                  <!-- <div class="projectdetails-jd-list-right-text" v-if="workAssignListitem.projectStatus==0">待审核</div> -->
                                </div>
                              </div>
                              
                            </div>
                          </div>
                          <div class="projectdetails-obj">
                    <div class="projectdetails-context-left">抄送对象：</div>
                    <div class="projectdetails-obj-tx">
                        <img :src="cclist.wxHeadImage" alt="" v-for="(cclist,index) in detailxq.ccUserList.slice( 0,3)" :key="index">
                    <!-- <img src="../../common/image/shanfenyuan.png" alt="">
                    <img src="../../common/image/shanfenyuan.png" alt=""> -->
                      <div class="nocaosolist" v-if="detailxq.ccUserList==false">无抄送人</div>
                      <div class="projectdetails-obj-nun" v-if="detailxq.ccUserList.length>3">{{detailxq.ccUserList.length}}+</div>
                    </div>
                      
                    <!-- <div class="projectdetails-obj-nun">{{index+1}}+</div> -->
                   </div>

                    </div>
                    
              </div>
                  <!-- <div class="projectdetails-fj" @click="download(detailxq.projectFilesNames,detailxq.projectFiles)">
                    <div class="projectdetails-context-left">相关附件：</div>
                    <div class="projectdetails-fj-context">
                      <img src="../../common/image/shanfenyuan.png" alt="">
                      <span>{{detailxq.projectFilesNames}}</span>
                    </div>
                  </div> -->

        <div class="projectdetails-bt" v-if="detailxq.projectStatus==1">
          <div class="projectdetails-bt-th" @click="projectcxbj">重新编辑</div>
        </div>

      </div>
      <projectedits ref="projectedit" @qxclick="qxclicks" @chossdetails="chossclicks"></projectedits>
    </div>
</template>
<script >
import projectedits from '@/views/project/projectedit.vue';
import { computed,defineComponent, ref, reactive,defineEmits} from "vue";
import { Flag, Search } from '@element-plus/icons-vue'
import { UploadFilled } from '@element-plus/icons-vue'
export default defineComponent({
  name: "project",
  props:{
    chartinfo: Array,
  },
  components: {
    UploadFilled,
    projectedits,
  },
  setup(props,context){
    const detailsshow=ref(false)
    const detailsmlshow=ref(false)
    const detailslcshow=ref(false)
    const detailstjshow=ref(false)
    const detailstjcgshow=ref(false)
    const detailsshbjshow=ref(false)
   const projectFileslist=ref([])
    const chossdetails =()=>{
      detailsshow.value=false
      detailsmlshow.value=false
    }
    const projectjs = ()=>{
      detailsmlshow.value=false
      detailslcshow.value=true
    }
    
    const projectchoss=()=>{
      detailsmlshow.value=true
      detailslcshow.value=false
    }
     const projecttjrw=()=>{
      detailsmlshow.value=false
      detailstjshow.value=true
    }
    const projectrwqx=()=>{
      detailsmlshow.value=true
      detailstjshow.value=false
    }
    const projectrwqr=()=>{
      detailsthshow.value=false
      detailstjcgshow.value=true
    }
    const projectrwsqwc=()=>{
       detailstjcgshow.value=false
       detailsshow.value=false
    }
    const projectedit =ref(null)
    const projectcxbj=()=>{
      detailsshbjshow.value=false
      // console.log(projectedit.value)
      projectedit.value.openprojectedit(detailxq.value)
      // detailstjshow.value=true
    }
    
    const qxclicks=()=>{
      detailsshbjshow.value=true
    }
   const detailxq=ref({})
   const getdetail=(val)=>{
    console.log('值',val)
    projectFileslist.value=[]
       detailxq.value=val
      detailsshow.value=true
      detailsshbjshow.value=true
      console.log(detailxq.value.projectName)


if(detailxq.value.projectFiles != ''){
        console.log('detailxq.value.projectFiles',detailxq.value.projectFiles)
        // return
        
        var Fileslists=[]
       Fileslists=detailxq.value.projectFilesNames.split(',')
       Fileslists.forEach((element,index) => {
        projectFileslist.value[index]={}
        if(element.indexOf('.pdf')!=-1||element.indexOf('.PDF')!=-1){
          projectFileslist.value[index].filesname=element
          projectFileslist.value[index].filelx='pdf'
        }else  if(element.indexOf('.dox')!=-1 || element.indexOf('.docx')!=-1
        ||element.indexOf('.DOX')!=-1 || element.indexOf('.DOCX')!=-1){
          projectFileslist.value[index].filesname=element
          projectFileslist.value[index].filelx='word'
        }else if(element.indexOf('.xls')!=-1||element.indexOf('.xlsx')!=-1
        ||element.indexOf('.XLS')!=-1||element.indexOf('.XLSX')!=-1){
          projectFileslist.value[index].url=element
          projectFileslist.value[index].filelx='xls'
        }else if(element.indexOf('.txt')!=-1||element.indexOf('.TXT')!=-1){
          projectFileslist.value[index].filesname=element
          projectFileslist.value[index].filelx='txt'
        }else if(element.indexOf('.ZIP')!=-1||element.indexOf('.RAR')!=-1
        ||element.indexOf('.ARJ')!=-1||element.indexOf('.Z')!=-1
        ||element.indexOf('.LZH')!=-1||element.indexOf('.JAR')!=-1
        ||element.indexOf('.zip')!=-1||element.indexOf('.rar')!=-1
        ||element.indexOf('.arj')!=-1||element.indexOf('.z')!=-1
        ||element.indexOf('.lzh')!=-1||element.indexOf('.jar')!=-1){
          // LZH、JAR
          projectFileslist.value[index].filesname=element
          projectFileslist.value[index].filelx='zip'
        }else if(element.indexOf('.BMP')!=-1||element.indexOf('.GIF')!=-1
        ||element.indexOf('.JPEG')!=-1||element.indexOf('.JPG')!=-1
        ||element.indexOf('.PNG')!=-1||element.indexOf('.bmp')!=-1
        ||element.indexOf('.gif')!=-1||element.indexOf('.jpeg')!=-1
        ||element.indexOf('.jpg')!=-1||element.indexOf('.png')!=-1){
          // LZH、JAR
          projectFileslist.value[index].filesname=element
          projectFileslist.value[index].filelx='img'
        }else if(element.indexOf('.avi')!=-1||element.indexOf('.wmv')!=-1
        ||element.indexOf('.mpeg')!=-1||element.indexOf('.mp4')!=-1
        ||element.indexOf('.AVI')!=-1||element.indexOf('.WMV')!=-1
        ||element.indexOf('.MPEG')!=-1||element.indexOf('.MP4')!=-1){
          // LZH、JAR
          projectFileslist.value[index].filesname=element
          projectFileslist.value[index].filelx='avi'
        }
        
        
        
       });

       console.log("projectFileslist",projectFileslist.value)
      }


   }
   const chossclicks=()=>{
    // console.log('10000')
    detailsshow.value=false
   }

  //  下载
   const download=(item , urls)=>{ //下载文件

            // let a = document.createElement('a')  // 创建a标签

            // let url = urls                        // 完整图片地址url连接  例如https://xxxx.cn/xxx/xxx/xxxx.xlsx   或者https://xxxx.cn/xxx/xxx/xxxx.png

            // fetch(url).then(res =>res.blob()).then(blob => {           

            //     a.href = URL.createObjectURL(blob)                //blob地址

            //     a.download = item                                   // 下载文件的名字

            //     a.click()

            // })
            window.location.href = urls

        }

    return {
      projectFileslist,
      chossclicks,
      download,
      detailxq,
      qxclicks,
      projectedits,
      projectedit,
      getdetail,
       detailsshow,
       detailslcshow,
       detailsmlshow,
       detailstjshow,
       detailstjcgshow,
       chossdetails,
       projectjs,
       projectchoss,
       projecttjrw,
       projectrwqx,
       projectrwqr,
       projectrwsqwc,
       detailsshbjshow,
       projectcxbj,
      //  UploadFilled,
    };
  }
});
</script>
<style>
.projectdetails{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #020113c4;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}
.projectdetails-content{
  width: 636px;
  height: auto;
  max-height: 790px;
  background: #FFFFFF;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  padding-bottom: 40px;
}
.projectdetails-title{
  width: 100%;
  height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
   background: #020113;
}
.projectdetails-title-imgortitle{
  display: flex;
  justify-content: flex-start;
  align-items: center;
 margin-left: 32px;
}
.projectdetails-title-imgortitle img{
  height: 48px;
  width: auto;
}
.projectdetails-title-imgortitle h3{
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
line-height: 36px;
}
.projectdetails-title-img{
  width: 48px;
  height: 48px;
  margin-right: 32px;
}
.projectdetails-title-img img{
  width: 48px;
  height: auto;
}
.projectdetails-contents-mcorfzr{
  margin-top: 80px;
}
.projectdetails-contents-mcorfzr h1{
font-size: 32px;
text-align: center;
font-weight: 500;
color: #000000;
line-height: 42px;
}
.projectdetails-contents-mcorfzr p{
font-size: 14px;
font-weight: 400;
color: #A4A5AB;
line-height: 20px;
text-align: center;
}
.projectdetails-time{
  text-align: center;
  width: 100%;
  height: auto;
  margin-top: 71px;
  
}
.projectdetails-time ul{
  width: 272px;
  height: 2px;
  background: linear-gradient(47deg, #34AA27 0%, #FA8C16 100%);
  margin: 0 auto;
  display: block;
  position: relative;
}
.projectdetails-time ul li:nth-child(1){
  width: 24px;
  height: 24px;
  background: #34AA27;
  position: absolute;
  top: -12.5px;
  left: -12px;
  border-radius: 100%;
}
.projectdetails-time ul li:nth-child(2){
  width: 24px;
  height: 24px;
  background: #FA7E16;
  position: absolute;
  top: -12.5px;
  right: -12px;
  border-radius: 100%;
}
.projectdetails-time ul li div{
  width: 200px;
  position: absolute;
  top: 47px;
  left: -88px;
  text-align: center;
}
.projectdetails-obj{
  margin-left: 106px;
  margin-top: 33px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.projectdetails-obj img{
  width: 64px;
  height: auto;
  margin: 0 8px;
}
.projectdetails-context-left{
  font-size: 18px;
  font-weight: 400;
  color: #020113;
  line-height: 28px;
}
.projectdetails-obj-tx{
  width: auto;
  height: 64px;
  display: flex;
}
.projectdetails-obj-nun{
  width: 68px;
  height: 36px;
  font-size: 14px;
  background: #F2F5FA;
  border-radius: 18px;
  color: #020113;
  font-weight: 500;
  text-align: center;
  line-height: 36px;
}
.projectdetails-sm{
  margin-left: 106px;
  margin-top: 106px;
  display: flex;
  justify-content: flex-start;
}
.projectdetails-sm-context{
  width: 334px;
  height: 60px;
  font-size: 18px;
  font-weight: 400;
  color: #020113;
  line-height: 29px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
   word-break:break-all;
}
.projectdetails-fj{
  margin-left: 106px;
  margin-top: 32px;
  display: flex;
  justify-content: flex-start;
  /* align-items: center; */
}
.projectdetails-fj-context{
  /* display: flex;
  justify-content: flex-start;
  align-items: center; */
}
.projectdetails-fj-context img{
  width: 33px;
  height: auto;
}
.projectdetails-fj-context span{
  font-size: 18px;
  font-weight: 400;
  color: #020113;
}
.projectdetails-bt{
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 10px;
}
.projectdetails-bt-th{
  width: 425px;
  height: 40px;
  border: 1px solid #020113;
  text-align: center;
  line-height: 40px;
  background: #020113;
  color: #ffffff;
  border-radius: 32px;
  font-size: 14px;
}
.projectdetails-bt-js{
  width: 204px;
  height: 40px;
  background: #020113;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  color: white;
  margin: 0 8px;
}
.projectdetails-contents{
  position: absolute;
  top: 96px;
  right: 32px;
}
.projectdetails-contents-start img{
  width: 48px;
  height: auto;
}
.projectdetails-contents-start div{
  font-size: 14px;
  font-weight: 400;
  color: #A4A5AB;
  line-height: 20px;

}
.project-tj-rw{
  width: 786px;
  height: 669px;
  background: #FFFFFF;
  border-radius: 32px;
}
.project-tj-rw div p{
  font-size: 32px;
  font-weight: 500;
  color: #000000;
  line-height: 42px;
  margin-top: 19px;
}
.project-tj-rw{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.project-lq{
  width: 636px;
  height: auto;
  
}
.project-lq-k{
  width: 636px;
  height: 593px;
  background: #FFFFFF;
  border-radius: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-lq div{
  text-align: center;
}
.project-lq div img{
  width: 200px;
  height: auto;
}
.project-lq div p{
  font-size: 32px;
  font-weight: 500;
  color: #000000;
  line-height: 42px;
  margin-top: 19px;
}
.project-lq div p span{
  border-bottom: 1px solid #2C2C2C;
}
.project-lq-choss{
  width: 72px;
  height: 72px;
  margin: 0 auto;
  margin-top: 16px;
}
.project-lq .project-lq-choss img{
  width: 72px;
  height: auto;
}
.project-lq-rw{
  width: 636px;
  height: 593px;
  background: #FFFFFF;
  border-radius: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project-lq-rw p{
  font-size: 32px;
  font-weight: 500;
  color: #000000;
  line-height: 42px;
  text-align: center;
}
.project-lq-rw textarea{
  width: 498px;
  height: 231px;
  border-radius: 8px;
  border: 1px solid #020113;
  resize:none;
  box-sizing: border-box;
  padding: 8px;
  margin-top: 50px;
}
.project-lq-rw-cz{
  width: 100%;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.project-lq-rw-cz .project-lq-rw-qx{
  width: 345px;
  height: 56px;
  background: #FFFFFF;
  border-radius: 32px;
  border: 1px solid #020113;
  text-align: center;
  line-height: 56px;
  font-size: 24px;
  font-weight: 400;
  color: #000000;
  box-sizing: border-box;
}
.project-lq-rw-cz .project-lq-rw-qr{
  width: 345px;
height: 56px;
  background: #020113;
  border-radius: 32px;
  border: 1px solid #020113;
  text-align: center;
  line-height: 56px;
  font-size: 24px;
  font-weight: bold;
  color: #FFFFFF;
  margin-left: 18px;
  box-sizing: border-box;
  
}
.project-sqcg{
  width: 241px;
  height: 56px;
  background: #020113;
  border-radius: 32px;
  font-size: 24px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 56px;
  margin: 0 auto;
  margin-top: 49px;
}
/* 上传页面 */
.project-tj-rw-xgsm{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
}
.project-tj-rw-xgsm input{
  width: 572px;
  height: 48px;
  border-radius: 8px;
  opacity: 0.3;
  border: 1px solid #020113;
  box-sizing: border-box;
  padding: 0 10px;
  margin-left: 8px;
}
.project-tj-rw-xgsm h3{
  font-size: 18px;
  font-weight: 400;
  color: #020113;
  line-height: 28px;
}
.project-tj-rw-upload{
   display: flex;
  justify-content: space-between;
  /* align-items: center; */
  margin-top: 50px;
}
.project-tj-rw-upload h3{
  font-size: 18px;
  font-weight: 400;
  color: #020113;
  line-height: 28px;
}

/* 上传样式 */
.upload-demo{
  width: 572px;
  height: 100%;
}
.el-upload-list{
  width: 572px;
  position: absolute;
  top: 0;
  height: 100px;
  overflow: hidden;
  overflow-y: auto;
  padding-right: 20px;
}
.el-upload-dragger{
  position: relative;
  margin-top:100px;
  padding: 0;
  height: 225px;
}
.el-upload-list__item-name{
  font-size: 18px;
}
.projectdetails-fj-context-file{
  width: 350px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  
   font-size: 14px;
}
.el-upload-dragger .el-upload__text{
  font-size: 14px;
  font-weight: 600;
}
.el-upload-dragger .el-upload__text em{
  color: black;
}
/* 项目节点 */
.projectdetails-jd-list{
  width: 334px;
height: 67px;
background: #020113;
border-radius: 16px;
display: flex;
justify-content: start;
align-items: center;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
.projectdetails-jd-list-img{
  margin-left: 16px;
}
.projectdetails-jd-list-img img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.projectdetails-jd-list-xq{
  width: 220px;
  margin-left: 10px;
}
.projectdetails-jd-list-zt img{
  width: 24px;
  height: 24px;
}
.projectdetails-jd-list-right{
  position: absolute;
  right: -20px;
  top: 8px;
  transform: rotate(40deg);
}
.projectdetails-jd-list-xq h2{
  font-size: 18px;
font-weight: 500;
width: 220px;
color: #FFFFFF;
line-height: 28px;
overflow:hidden;
white-space:nowrap; 
text-overflow:ellipsis;
height: 28px;

}
.projectdetails-jd-list-xq p{
  width: 220px;
  font-size: 12px;
font-weight: 400;
color: #FFFFFF;
line-height: 18px;
overflow:hidden;
height: 16px;
text-overflow:ellipsis;
white-space:nowrap; 
}
.projectdetails-jd-list-right-text{
  font-size: 12px;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
width: 80px;
height: 20px;
text-align: center;
background-color: #FF5300;
}
/* 滚动 */
.projectdetails-contents-gd{
   width: 656px;
   overflow-y: auto;
   height: 600px;
}
.neihuq{
  width: 636px;
}

.projectdetails-obj-tx img{
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.nocaosolist{
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
    color: #020113;
}
.no-dataiksfj{
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
    color: #020113;
}

</style>